<template>
  <div>
    <div class="cate-wrap">
      <div class="cate-left">
        <van-sidebar v-model="activeKey" @change="onChange" >
          <van-sidebar-item
          v-for="cate in cates" :key="cate.id"
          :title="cate.name" >
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <div class="cate-right">
        <div v-if="!items.length">
          <img src="../../assets/01.png" style="width:264px;height:300px" alt="">
        </div>
        <div v-else class="items">
          <div class="item"
            @click="linkTo(item.id)"
            v-for="(item, index) in items"
            :key="item.id"
            @change="clickItem(item.id, index)"
            >
            <img :src="item.pic" alt="">
            <div class="info">
              <h5 class="name">{{item.name}}</h5>
              <p class="desc">{{item.characteristic?item.characteristic:'暂无描述' | filterDesc }}</p>
              <div class="price-tubiao">
                <span class="price">￥{{item.minPrice}}</span>
                <van-icon @click.stop="clickCart(item.id, index)" class-prefix="icon" name="gouwuche" color="red" size="20"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <common-tab/>
  </div>
</template>

<script>
import CommonTab from 'components/CommonTab'
import { fetchCates, fetchItem } from 'api'
export default {
  name: 'cate',
  data () {
    return {
      activeKey: 0,
      cates: [],
      items: []
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    linkTo (id) {
      this.$router.push({
        path: './detail',
        query: {
          id
        }
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
        this.onChange()
      })
    },

    onChange (index) {
      // 因为第一次取到的index是undefined,所以第一次就拿不到数据,就做个判断,如果第一次取到的值为undefined就把值变成0
      if (index === undefined) {
        index = 0
      }
      fetchItem({
        categoryId: this.cates[index].id
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
        if (res.data.code === 700) {
          this.items = []
        }
      })
    }
  },
  filters: {
    filterDesc (v, len = 10) {
      if (v.length > 10) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    }
  },
  components: {
    CommonTab
  }
}
</script>

<style lang="scss" scoped>
.cate-wrap{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 50px;
  display: flex;
  .cate-left{
    width: 80px;
    overflow-y: auto;
  }
  .cate-right{
    flex: 1;
    overflow-y: auto;
    .item{
      padding:8px;
      background-color: #fff;
      height: 200px;
      display: flex;
      padding: 5px;
      border-radius: 8px;
        img{
          width: 150px;
          height: 150px;
        }
      .info{
        flex: 1;
        padding-left: 20px;
        .name{
          padding-top: 30px;
          line-height: 30px;
        }
        .desc{
          font-size: 12px;
          color: #333;
          padding-top: 20px;
        }
        .price-tubiao{
          margin-top: 30px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          padding-right: 10px;
        }
      }
    }
  }
}

</style>
